import React from 'react';
// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 声明标签
const h1 = <h1>Hello React</h1>;
// 使用 React API 创建元素
const h1React = React.createElement('h1', null, 'Hello React2');

// 练习
const p1 = <p>月薪过万</p>;
const p1React = React.createElement('p', null, '月薪过万222');
const p2 = <p id="123">月薪过万</p>;
const p2React = React.createElement('p', { id: '123' }, '月薪过万333');
const p3 = (
  <p id="123" className="title">
    月薪过万
  </p>
);
const p3React = React.createElement(
  'p',
  { id: '123', className: 'title' },
  '月薪过万444'
);
const div = (
  <>
    <div>
      <hr />
      <h2>购物列表</h2>
      <ul>
        <li>华为</li>
        <li>iPhone</li>
      </ul>
    </div>
    <div>22222</div>
  </>
);
const divReact = React.createElement(
  'div',
  null,
  React.createElement('h2', null, '购物列表1'),
  React.createElement(
    'ol',
    null,
    React.createElement('li', null, '华为1'),
    React.createElement('li', null, 'iPhone1')
  )
);

// 渲染这个标签（React 元素）
root.render(div);
